<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>监听属性</title>
	</head>
	<body>
		<div id="app">
			<p><input type="text" v-model="person.age"></p>
      <p v-show="info">{{ info }}</p>
		</div>
	
		<script src="https://unpkg.com/vue@next"></script>
		<script>
      Vue.createApp({
        data(){
          return {
            person: {
              name: 'lisi',
              age: 0
            },
            info: ''
          }
        },
        watch: {
          /*person: {
            handler(val, oldValue){
              if(val.age >= 18){
                this.info = '已成年'
              }
              else {
                this.info = '未成年'
              }
            },
            deep: true,
            immediate: true
          }*/
          'person.age'(val){
            if(val >= 18){
              this.info = '已成年'
            }
            else {
              this.info = '未成年'
            }
          }
        }
      }).mount('#app')
    </script>
	</body>
</html>

